import React from 'react';
import { useGlobalIndexes } from '../hooks/useGlobalIndexes';
import { GlobalIndexData } from '@shared/types/market';

const GlobalIndexes: React.FC = () => {

  // 获取全球指数数据
  const { data, isLoading, error } = useGlobalIndexes();
  
  // 调试日志
  console.log('🎯 GlobalIndexes - isLoading:', isLoading);
  console.log('🎯 GlobalIndexes - error:', error);
  console.log('🎯 GlobalIndexes - data:', data);

  const getStatusIcon = (status: string) => {
    switch (status) {
      case 'trading':
        return '🟢';
      case 'pre_market':
      case 'after_hours':
        return '🟡';
      case 'closed':
        return '⚫';
      default:
        return '⚪';
    }
  };

  // 渲染单个指数卡片（紧凑横向布局）
  const renderIndexCard = (index: GlobalIndexData) => {
    const change = index.change ?? 0;
    const changePct = index.change_pct ?? 0;
    
    const isPositive = change >= 0;
    const changeColor = isPositive ? 'text-red-600' : 'text-green-600';
    const bgColor = isPositive ? 'bg-red-50' : 'bg-green-50';

    return (
      <div
        key={index.code}
        className={`${bgColor} rounded-lg p-3 flex items-center justify-between hover:shadow-md transition-shadow`}
      >
        <div className="flex items-center gap-2">
          <span className="text-base">{getStatusIcon(index.market_status || 'closed')}</span>
          <span className="font-semibold text-gray-900 text-sm">{index.name}</span>
        </div>
        <div className={`font-bold text-sm ${changeColor}`}>
          {isPositive ? '+' : ''}{changePct.toFixed(2)}%
        </div>
      </div>
    );
  };

  // 渲染一行指数卡片（4个并排）
  const renderIndexRow = (indexes: GlobalIndexData[], title: string, icon: string) => {
    return (
      <div className="mb-4">
        <div className="text-xs text-gray-500 mb-2 font-medium">{icon} {title}</div>
        <div className="grid grid-cols-4 gap-3">
          {indexes.slice(0, 4).map(renderIndexCard)}
          {/* 如果不足4个，填充空白 */}
          {indexes.length < 4 && Array.from({ length: 4 - indexes.length }).map((_, i) => (
            <div key={`empty-${i}`} className="bg-gray-50 rounded-lg p-3 opacity-50">
              <div className="text-xs text-gray-400 text-center">暂无数据</div>
            </div>
          ))}
        </div>
      </div>
    );
  };

  if (isLoading) {
    return (
      <div className="space-y-4">
        {/* 加载骨架屏 - 3行，每行4个卡片 */}
        {[1, 2, 3].map((row) => (
          <div key={row} className="grid grid-cols-4 gap-3">
            {[1, 2, 3, 4].map((col) => (
              <div key={col} className="bg-gray-100 rounded-lg p-3 h-12 animate-pulse" />
            ))}
          </div>
        ))}
      </div>
    );
  }

  if (error) {
    return (
      <div className="bg-red-50 border border-red-200 rounded-lg p-4 text-center">
        <div className="text-red-600 text-sm">
          <span className="text-lg">⚠️</span> 全球指数数据加载失败
        </div>
      </div>
    );
  }

  return (
    <div className="space-y-4">
      {/* 美洲市场 */}
      {data?.americas && data.americas.length > 0 && 
        renderIndexRow(data.americas, '美洲市场', '🌎')}
      
      {/* 欧洲市场 */}
      {data?.europe && data.europe.length > 0 && 
        renderIndexRow(data.europe, '欧洲市场', '🌍')}
      
      {/* 香港市场 */}
      {data?.hongkong && data.hongkong.length > 0 && 
        renderIndexRow(data.hongkong, '香港市场', '🇭🇰')}
      
      {/* 亚太市场 */}
      {data?.asia && data.asia.length > 0 && 
        renderIndexRow(data.asia, '亚太市场', '🌏')}
    </div>
  );
};

export default GlobalIndexes;

